import React, { useEffect, useState } from "react";
import type { RouteObjectType } from "@/typings/router";
import { Layout } from "antd";
import { Icon } from "@/components/Icon";
import { useLocation, useNavigate } from "react-router";
import { useMenuStore } from "@/store/menus";
import { useShallow } from "zustand/react/shallow";
import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight";
import LayoutMenu from "@/layouts/components/Menu";
import LayoutMain from "@/layouts/components/Main";
import logo from "@/assets/images/logo.png";
import "./index.scss";

const { Header, Sider } = Layout;

const LayoutColumns: React.FC = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  const { isCollapse, sidebarMenuList } = useMenuStore(useShallow((state) => ({ isCollapse: state.isCollapse, sidebarMenuList: state.sidebarMenuList })));

  const [menuActive, setMenuActive] = useState("");
  const [subMenuList, setSubMenuList] = useState<RouteObjectType[]>([]);

  useEffect(() => {
    if (!sidebarMenuList.length) return;
    const menuItem = sidebarMenuList.find((item) => {
      return pathname === item.path || `/${pathname.split("/")[1]}` === item.path;
    });
    setMenuActive(pathname);
    setSubMenuList(menuItem?.children || []);
  }, [pathname]);

  const handleNavigation = (item: RouteObjectType) => {
    if (item.meta?.isLink) window.open(item.meta.isLink, "_blank");
    navigate(item.path!);
  };

  const changeSubMenu = (item: RouteObjectType) => {
    setMenuActive(item.path!);
    setSubMenuList(item.children || []);
    handleNavigation(item.children?.length ? item.children[0] : item);
  };

  return (
    <section className="layout-columns">
      <div className="sider-split">
        <div className="logo">
          <img src={logo} alt="logo" className="logo-img" />
        </div>
        <div className="menu-list">
          {sidebarMenuList.map((item) => {
            return (
              <div key={item.path} className={`menu-item ${(menuActive === item.path || `/${menuActive.split("/")[1]}` === item.path) && "menu-active"}`} onClick={() => changeSubMenu(item)}>
                <Icon name={item.meta!.icon!} />
                <span className="title truncate">{item.meta?.title}</span>
              </div>
            );
          })}
        </div>
      </div>
      <Sider width={224} collapsed={isCollapse} className={`${!subMenuList.length && "not-sider"}`}>
        {subMenuList.length ? (
          <React.Fragment>
            <div className="logo">{!isCollapse && <span className="logo-text">{import.meta.env.VITE_APP_TITLE}</span>}</div>
            <LayoutMenu mode="inline" menuList={subMenuList} />
          </React.Fragment>
        ) : null}
      </Sider>
      <Layout>
        <Header>
          <ToolBarLeft />
          <ToolBarRight />
        </Header>
        <LayoutMain />
      </Layout>
    </section>
  );
};

export default LayoutColumns;
